<template>
  <fullScreenContainer title="湖南省农业优势特色产业集群信息系统"  type='fullScreenContainer'>
    <template slot="leftContent">
      <Panel key="jdfj" title="基地分级" height="100%">
        <template slot="right">
          <div>
            <span>大类1</span>
            <span>大类2</span>
          </div>
        </template>
        <div style="display: flex; flex-wrap: wrap;">
          <box1></box1>
          <box2></box2>
          <box3></box3>
          <tabs1></tabs1>
          <tabs2></tabs2>
          <div class="bars-box">
            <echartsDemo key="bars" :initChart="barsChart"></echartsDemo>
          </div>
          <div class="bars-box">
            <echartsDemo key="top" :initChart="topChart"></echartsDemo>
          </div>

          <div class="circle-box-mb">
            <circle1></circle1>
            <div class="circle-box-year">
              <span>2022年</span>
            </div>
            <div class="circle-total">
              <span class="circle-total-text">目标</span>
              <span class="circle-total-number">{{ numberFormat(48368) }}</span>
            </div>
          </div>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="cgmj" title="场馆面积" class="flex1" height="100%">
        <div class="bars-box">
          <echartsDemo
            key="sxbars"
            :initData="sxbars"
            :initChart="sxbarChart"
          ></echartsDemo>
        </div>
        <div class="bars-box">
          <echartsDemo
            :initData="sxbars_hx"
            key="hxbars"
            :initChart="hxChart"
          ></echartsDemo>
        </div>
        <div class="bars-box">
          <echartsDemo key="piebars" :initChart="pieChart"></echartsDemo>
        </div>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <div class="table1-box">
          <scroll
            rowStyle="content_tr_center"
            :runSpeed="22"
            :scrollContentHeight="310"
            :columnsConfg="learDataColumnsConfg"
            :rowdata="rowdata"
          >
            <template slot="name" slot-scope="{ data }">
              <span @click="text(data)">
                aa
              </span>
            </template>
          </scroll>
        </div>
        <!-- <Map ref="Map"></Map> -->
      </div>
    </template>
    <template slot="centerContent">
      <map-tools></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import MapTools from '@/layout/components/Center/index.vue'
import echartsDemo from '@/echartsDemo/index.vue'
import box1 from './box1.vue'
import box2 from './box2.vue'
import box3 from './box3.vue'
import tabs1 from './tabs1.vue'
import tabs2 from './tabs2.vue'
import barsChart from './barsChart.js'
import sxbarChart from './sxbarChart.js'
import circle1 from './circle.vue'
import hxChart from './hxChart.js'
import pieChart from './pieChart.js'
import topChart from './topChart.js'
import table1 from './table1.vue'
import scroll from './scroll.vue'
export default {
  components: {
    MapTools,
    box1,
    box2,
    box3,
    tabs1,
    tabs2,
    echartsDemo,
    circle1,
    table1,
    scroll,
  },
  data() {
    return {
      sxbars: [1, 2, 3],
      sxbars_hx:{
        getname:['中央资金1', '地方配套资金', '自筹资金'],
        getvalue:[37, 20, 25, 30, 34],
        title:'基地123',
        number:'48,168'
      },
      barsChart,
      sxbarChart,
      hxChart,
      pieChart,
      topChart,
      learDataColumnsConfg: [
        {
          label: '班级名称',
          prop: 'name',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '班主任',
          prop: 'class',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '评估',
          prop: 'content',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '实验',
          prop: 'datetiem',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '项目',
          prop: 'pro',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '综合',
          prop: 'zh',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '排名',
          prop: 'sort',
          width: '10%',
          paddingLeft: '0px',
        },
      ],
      rowdata: [
        {
          name: '2022级计算机1班',
          class: 'yy1',
          content: 'xx',
          datetiem: '66.66',
          pro: '40.66%',
          zh: '50.55%',
          sort: '1',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
          pro: '40.66%',
          zh: '50.55%',
          sort: '3',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '66.66',
          pro: '40.66%',
          zh: '50.55%',
          sort: '3',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
          pro: '40.66%',
          zh: '50.55%',
          sort: '4',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
          pro: '46.66%',
          zh: '55.55%',
          sort: '5',
        },
        {
          name: '2022级计算机1班',
          class: 'yy2',
          content: 'xx',
          datetiem: '66.66',
          pro: '90.66%',
          zh: '50.55%',
          sort: '6',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
          pro: '39.66%',
          zh: '59.55%',
          sort: '7',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
          pro: '39.66%',
          zh: '59.55%',
          sort: '8',
        },
        {
          name: '2022级计算机1班',
          class: 'yy3',
          content: 'xx',
          datetiem: '76.76',
          pro: '39.66%',
          zh: '59.55%',
          sort: '9',
        },
      ],
    }
  },
  methods: {
    text(data) {
      console.log(data, 'sss')
    },
  },
  mounted() {
    setTimeout(() => {
      this.sxbars = [new Date().getTime()]
      console.log(this.sxbars, 'this.sxbars')
    }, 2000)
  },
}
</script>
<style scoped lang="scss">
.bars-box {
  width: 420px;
  height: 300px;
}
.circle-box-mb {
  width: 100px;
  height: 100px;
  .circle-box-year {
    height: 20px;
    margin-top: 16px;
    text-align: center;
  }
  .circle-box-year span {
    opacity: 1;
    /* 图表中文 */
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: 350;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0em;

    /* 文字白 */
    color: #ffffff;

    z-index: 0;
  }
  .circle-total {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    justify-content: center;
    .circle-total-text {
      font-family: Source Han Sans;
      font-weight: 400;
      font-size: 12px;
      font-variation-settings: 'opsz' auto;
      color: #d0fff2;
    }
    .circle-total-number {
      font-family: DIN;
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      letter-spacing: 0em;

      background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      z-index: 0;
    }
  }
}
.map-page-container {
  width: 1064px !important;
  height: 966px !important;
  border-radius: 5px;
  opacity: 1;
  border: 1px solid red;
  /* 自动布局 */
  display: flex;
  flex-direction: column;
  padding: 16px 0px !important;
  gap: 30px;
  flex-grow: 1;

  /* 背景渐变1 */
  background: linear-gradient(
    180deg,
    rgba(17, 77, 71, 0.3) 0%,
    rgba(22, 53, 50, 0.3) 100%
  );

  z-index: 1;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}
.table1-box {
  width: 500px;
}
</style>
